<template>
	<view class="" style="background-color: white;border-radius: 20px;">
		<view class="" :style="[randomColorStyle]" style="border-radius: 20px;padding: 5px 0;">
			<!-- <view style="padding-left: 5px;" class="" v-if="topicSku.hotChartsFlag" @click="gotoMarketDetail">
				<view class="top_wenzi">
					海鲜热榜TOP{{topicSku.hotChartsFlag}} !
				</view>
			</view> -->

			<view class="" style="display: flex;justify-content: space-between;margin-top: 5px;padding: 0 10px;"
				@click="gotoMarketDetail">
				<!-- 左侧 文字-->
				<view class="" style="width: 80%;">

					<view class=""
						style="display: flex;align-items: center;justify-content: space-between;position: relative;">
						<view class="" style="display: flex;align-items: center;width: 100%;">
							<img v-if="topicSku.sort !== 3" style="width: 20px;height: 20px;"
								:src="sortImages[topicSku.sort-1]" alt="" />
							<img v-else style="height: 20px;width: 80px;" src="../../../static/ui/chaohua1.png"
								alt="" />
							<view
								style="text-overflow: ellipsis;max-width: 60%;white-space: nowrap;overflow: hidden;margin-left: 3px;font-size: 35rpx;font-weight: 900;font-family: system-ui;flex:1;"
								class="center_wenzi">
								{{topicSku.title}}
							</view>
						</view>

						<!-- 箭头 -->
						<view class=""
							style="position: absolute;right: 0;height: 100%;display: flex;align-items: center;">
							<u-icon size="30" name="arrow-right"></u-icon>

						</view>

					</view>

					<view class=""
						style="width: 80%;display: flex;align-items: center;color: #ccc;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">

						<view>{{topicSku.popularity}}人气</view>
						<view style="margin: 0 6px;">|</view>
						<view>
							<span>
								{{topicSku.subheading}}

							</span>
						</view>
					</view>

				</view>
				<!-- 右侧收藏 -->
				<view class="" style="display: flex;align-items: center;width: 20%;">
					<view class="shoucang" style="width: 100%;">
						+收藏
					</view>
				</view>
			</view>

			<!-- 内容瀑布流 四个item -->
			<view class="">
				<!--  -->
				<zyflow @gotoMarketDetail="gotoMarketDetail" @computeImageHeight="computeImageHeight"
					:flowlist="topicSku.marketTopicSkuList" :topicId="topicSku.id" @getRelativeTopic="getRelativeTopic">
				</zyflow>

			</view>

		</view>

	</view>


</template>

<script>
	import zyflow from '@/components/bwaterfall/zyflow.vue'
	export default {
		props: {
			topicSku: {
				type: Object
			},

		},
		data() {
			return {


				randomColorStyle: {},

				relativeTopicList: [],

				sortImages: [
					'../../../static/ui/jinhao.png',
					'../../../static/ui/hotjinhao.png',
				],

			}
		},

		mounted() {
			this.setRandomColor();


		},
		methods: {
			//从子组件拿到相关热点信息
			getRelativeTopic(relativeTopicList) {
				this.relativeTopicList = relativeTopicList
			},
			setRandomColor() {
				this.randomColorStyle = this.generateRandomColorStyle();
			},
			generateRandomColorStyle() {
				const shouldGradient = Math.random() < 0.3; // 梯度渐变的概率为 30%
				if (shouldGradient) {
					const randomColor = this.getRandomColor();
					return {
						background: `linear-gradient(to bottom, ${randomColor}, rgba(255, 255, 255, 0))`,
						backgroundRepeat: 'no-repeat',
						backgroundSize: '100% 13%'
					};
				} else {
					return {
						background: 'white'
					};
				}
			},
			getRandomColor() {
				return `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1.0)`;
			},
			gotoMarketDetail(item) {
				//判断是什么类型的话题
				//1为普通话题
				//2为爆款
				//3为超话
				const relativeTopicList = JSON.stringify(this.relativeTopicList)
				if (this.topicSku.sort === 1) {

					//如果点击的是上半部分，不需要传递sku信息
					if (!item.content) {
						//传递点击的topic信息,传递相关热点信息
						const topicInfo = JSON.stringify(this.topicSku)

						uni.navigateTo({
							url: '../../pagesA/marketDetail/marketDetail?topicInfo=' + encodeURIComponent(
									topicInfo) +
								'&relativeTopic=' + encodeURIComponent(relativeTopicList)
						});
					} else {
						//传递点击的sku信息,,topic信息
						const topicInfo = JSON.stringify(this.topicSku)
						const topicSkuInfo = JSON.stringify(item)
						uni.navigateTo({
							url: '../../pagesA/marketDetail/marketDetail?topicInfo=' + encodeURIComponent(
									topicInfo) +
								'&topicSkuInfo=' + encodeURIComponent(topicSkuInfo) + '&relativeTopic=' +
								encodeURIComponent(relativeTopicList)
						});
					}
				} else if (this.topicSku.sort === 2) {
					if (!item.content) {
						//传递点击的topic信息,传递相关热点信息
						const topicInfo = JSON.stringify(this.topicSku)
						uni.navigateTo({
							url: '../../pagesA/hotMarketDetail/hotMarketDetail?topicInfo=' + encodeURIComponent(
									topicInfo) +
								'&relativeTopic=' + encodeURIComponent(relativeTopicList)
						});
					} else {
						//传递点击的sku信息,,topic信息
						const topicInfo = JSON.stringify(this.topicSku)
						const topicSkuInfo = JSON.stringify(item)
						uni.navigateTo({
							url: '../../pagesA/hotMarketDetail/hotMarketDetail?topicInfo=' + encodeURIComponent(
									topicInfo) +
								'&topicSkuInfo=' + encodeURIComponent(topicSkuInfo) + '&relativeTopic=' +
								'&relativeTopic=' + encodeURIComponent(relativeTopicList)
						});
					}

				} else if (this.topicSku.sort === 3) {
					if (!item.content) {
						//传递点击的topic信息,传递相关热点信息
						const topicInfo = JSON.stringify(this.topicSku)
						uni.navigateTo({
							url: '../../pagesA/chaoMarketDetail/chaoMarketDetail?topicInfo=' + encodeURIComponent(
								topicInfo)
						});
					} else {
						//传递点击的sku信息,,topic信息
						const topicInfo = JSON.stringify(this.topicSku)
						const topicSkuInfo = JSON.stringify(item)
						uni.navigateTo({
							url: '../../pagesA/chaoMarketDetail/chaoMarketDetail?topicInfo=' + encodeURIComponent(
									topicInfo) +
								'&topicSkuInfo=' + encodeURIComponent(topicSkuInfo)

						});
					}
				}




			}


		},
		components: {
			zyflow
		}
	}
</script>

<style lang="scss" scoped>
	.top_wenzi {
		border: 2px black solid;
		width: 40%;
		border-radius: 20px;
		text-align: center;
		margin-top: 4px;
		background-color: yellow;
		font-size: 25rpx;
		font-weight: 900;
	}

	.shoucang {
		border: 1px black solid;
		font-size: 33rpx;
		border-radius: 20px;
		text-align: center;
		font-weight: 900;
	}
</style>